import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Button, Modal, Row, Col, Radio } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import styles from './style.less';
import router from 'umi/router'
import User from '@/assets/images/login/user.png';
import Pwd from '@/assets/images/login/pwd.png';
import {inject_unount} from '@/utils/middleware'
interface IProps extends FormComponentProps {
  dispatch?: Function,
  unitList?: any,
}

@connect(({user}) => ({
  unitList: user.unitList || [],
  
}))
@inject_unount
class LoginFrom extends Component<IProps> {
  state= {
    visible: false,
    value: ''
  }
  changeUnit = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/queryUnitList' }).then(() => {
      const { unitList } = this.props
      unitList.length>1  ? this.setState({
        visible: true,
      }) : router.push('/home')
    }) 
  }
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  handleOk = e => {
    const { dispatch } = this.props;
    dispatch({ type: 'user/chooseUnit', payload: { id: this.state.value } }).then(() => {
      this.setState({
        visible: false,
      });
    })
  };
  onChange = e => {
    const { dispatch } = this.props;
    this.setState({
      value: e.target.value,
    })
    dispatch({ type: 'user/queryUnitList' })
  }

  componentDidMount() {
    const loginName = localStorage.getItem('userName');
    this.props.form.setFieldsValue({
      loginName
    })
  }
  

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'user/login',
          payload: {
            ...values,
          },
        }).then(() => {
          this.changeUnit()
        })
      }
    });
  }

  holdUserName = (event) => {
    localStorage.setItem('userName', event.target.value)
  }

  holdPassword = (event) => {
    localStorage.setItem('password', event.target.value)
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { unitList} = this.props
    
    return (
    <>
      <Form onSubmit={this.handleSubmit} className={styles.logionFrom}>
        <Form.Item style={{marginLeft: 60, position: 'relative'}}>
          <img width="36" height="36" src={User} style={{position: 'absolute', left: -61, top: -10}}/>
          {getFieldDecorator('loginName', {
            rules: [{ required: true, message: '输入用户名' }],
          })(
            <Input 
              placeholder="用户名"
              width={490}
              onBlur={this.holdUserName}
            />
          )}
        </Form.Item>
        <Form.Item style={{marginLeft: 60, position: 'relative'}}>
          <img width="36" height="36" src={Pwd}   style={{position: 'absolute', left: -61, top: -10}}/>
          {getFieldDecorator('loginPwd', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input
              type="password"
              placeholder="密码"
              width={490}
              onBlur={this.holdPassword}
            />
          )}
        </Form.Item>
        <Form.Item style={{ marginTop: -20, marginLeft: 55 }}>
          <span style={{ color: 'rgba(237,113,9,1)' }}>友情提示：若忘记密码，请拨打400-605-5119</span>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.loginButton}>
            登录
          </Button>
        </Form.Item>
      </Form>
      <Modal
          title="切换单位"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={800}
          bodyStyle={{ height: 399 }}
        >
                 <Radio.Group
            name="radiogroup"
            onChange={this.onChange}
            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}
           
          >
            <Row style={{ marginTop: 20, height: 300, overflowY: 'auto', overflowX: 'hidden' }}>
              {
                Array.isArray(unitList) && unitList.map(v => (
                  <Col span={12} key={v.id}>
                    <Radio style={{ marginTop: 20, marginLeft: 100 }} value={v.id}>{v.name}</Radio>
                  </Col>
                ))
              }
            </Row>
          </Radio.Group>
      </Modal>    
    </>
    );
  }
}

const Login = Form.create()(LoginFrom);
export default Login;
